<template>


    <div class="relus">
      <scroll-view scroll-y>
      <div class="page__bd">
        <form @submit="submitForm">
          <div class="weui-cells__title">性别</div>
          <div class="weui-cells weui-cells_after-title">
            <radio-group name="gender" @change="radioChange">
              <label class="weui-cell weui-check__label" v-for="(item,index) in radio"  :key="index">
                 <radio class="weui-check" :value="item.value" :checked="item.checked" />
                <div class="weui-cell__bd">{{ item.name }}</div>
                <div class="weui-cell__ft weui-cell__ft_in-radio" v-if="item.checked">
                  <icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
                </div>
              </label>
            </radio-group>
          </div>
          <view class="weui-cells__title">编码助手(1-2个)</view>
          <view class="weui-cells weui-cells_after-title">
            <checkbox-group name="assistance" @change="checkboxChange">
              <label class="weui-cell weui-check__label" v-for="(item,index) in checkbox " :key="index">
                <checkbox class="weui-check" :value="item.value" :checked="item.checked" />
                <view class="weui-cell__hd weui-check__hd_in-checkbox">
                  <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
                  <icon class="weui-icon-checkbox_success" type="success" size="23" v-if="item.checked"></icon>
                </view>
                <view class="weui-cell__bd">{{ item.name }}</view>
              </label>
            </checkbox-group>
          </view>
          <view class="weui-cells__title">基本信息</view>
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">邮箱</view>
              </view>
              <view class="weui-cell__bd">
                <input name="email" :value="form.email" class="weui-input" type="text" placeholder="请输入邮箱" />
              </view>
            </view>
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">手机号</view>
              </view>
              <view class="weui-cell__bd">
                <input name="tel" :value="form.tel" class="weui-input" type="number" placeholder="请输入手机号" />
              </view>
            </view>
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">身份证号码</view>
              </view>
              <view class="weui-cell__bd">
                <input name="idcard" :value="form.idcard" class="weui-input" type="idcard" placeholder="请输入身份证号码" />
              </view>
            </view>
          </view>
          <view class="weui-cells__title">密码验证</view>
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">新密码</view>
              </view>
              <view class="weui-cell__bd">
                <input name="password" :value="form.password" class="weui-input" type="text" placeholder="6到15位，包含数字和字母" password="true"
                />
              </view>
            </view>
            <view class="weui-cell weui-cell_input">
              <view class="weui-cell__hd">
                <view class="weui-label">确认密码</view>
              </view>
              <view class="weui-cell__bd">
                <input name="confirmPassword" :value="form.confirmPassword" class="weui-input" type="text" placeholder="确认密码和新密码保持一致"
                  password="true" />
              </view>
            </view>
          </view>
          <view class="weui-cells__title">国籍</view>
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
              <view class="weui-cell__hd weui-cell__hd_in-select-after">
                <view class="weui-label">国家/地区</view>
              </view>
              <view class="weui-cell__bd">
                <picker name="countryIndex" @change="bindCountryChange" :value="form.countryIndex" :range="countries">
                  <view class="weui-select weui-select_in-select-after">{{ countries[form.countryIndex] }}</view>
                </picker>
              </view>
            </view>
          </view>
          <view class="weui-cells__title">年龄</view>
          <slider name="slider" show-value />
          <view class="weui-cells__title">声明</view>
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_switch">
              <view class="weui-cell__bd">声明</view>
              <view class="weui-cell__ft">
                <switch name="agree" :checked="form.agree" />
              </view>
            </view>
          </view>
          <view class="weui-cells__title">自愿书</view>
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
              <view class="weui-cell__bd">
                <textarea name="textarea" :value="form.textarea" class="weui-textarea" placeholder="请输入文本（必须含有自愿两字）" style="height: 3.3em"
                />
              </view>
            </view>
          </view>
          <div class="button-sp-area">
            <button class="weui-btn" type="primary" formType="submit">提交</button>
          </div>
        </form>
      </div>
      </scroll-view>
    </div>

</template>


<script>
  export default {
    data() {
      return {
        form: {
          gender: '',
          assistance: '',
          email: '',
          tel: '',
          idcard: '',
          password: '',
          confirmPassword: '',
          countryIndex: '',
          slider: '',
          agree: '',
          textarea: '',
        },
        radio: [{
            name: '男',
            value: 'male',
            checked: !1,
          },
          {
            name: '女',
            value: 'female',
          },
        ],
        checkbox: [{
            name: '黄药师',
            value: '0001',
            checked: !1,
          },
          {
            name: '欧阳锋',
            value: '0002',
          },
          {
            name: '段智兴',
            value: '0003',
          },
          {
            name: '洪七公',
            value: '0004',
          },
        ],
        countries: [
          '中国',
          '美国',
          '英国',
        ],
        // component: App.components[2],
      }
    },
    methods: {
      showModal(error) {
        wx.showModal({
          content: error.msg,
          showCancel: false,
        })
      },
      submitForm(e) {
        const params = e.mp.detail.value

        console.log(params)

        // 传入表单数据，调用验证方法
        if (!this.WxValidate.checkForm(params)) {
          const error = this.WxValidate.errorList[0]
          this.showModal(error)
          return false
        }

        this.showModal({
          msg: '提交成功',
        })
      },
      initValidate() {
        // 验证字段的规则
        const rules = {
          gender: {
            required: true,
          },
          assistance: {
            required: true,
            assistance: true,
          },
          email: {
            required: true,
            email: true,
          },
          tel: {
            required: true,
            tel: true,
          },
          idcard: {
            required: true,
            idcard: true,
          },
          password: {
            required: true,
            minlength: 6,
            maxlength: 15,
          },
          confirmPassword: {
            required: true,
            minlength: 6,
            maxlength: 15,
            equalTo: 'password',
          },
          countryIndex: {
            required: true,
          },
          slider: {
            required: true,
            min: 40,
            max: 80,
          },
          agree: {
            required: true,
          },
          textarea: {
            required: true,
            contains: '自愿',
          },
        }

        // 验证字段的提示信息，若不传则调用默认的信息
        const messages = {
          gender: {
            required: '请选择性别',
          },
          assistance: {
            required: '请勾选1-5个敲码助手',
          },
          email: {
            required: '请输入邮箱',
            email: '请输入正确的邮箱',
          },
          tel: {
            required: '请输入手机号',
            tel: '请输入正确的手机号',
          },
          idcard: {
            required: '请输入身份证号码',
            idcard: '请输入正确的身份证号码',
          },
          password: {
            required: '请输入新密码',
            minlength: '密码长度不少于6位',
            maxlength: '密码长度不多于15位',
          },
          confirmPassword: {
            required: '请输入确认密码',
            minlength: '密码长度不少于6位',
            maxlength: '密码长度不多于15位',
            equalTo: '确认密码和新密码保持一致',
          },
          countryIndex: {
            required: '请选择国家/地区',
          },
          slider: {
            required: '请选择年龄',
            min: '年龄不小于18',
            max: '年龄不大于60',
          },
          agree: {
            required: '请同意我们的声明',
          },
          textarea: {
            required: '请输入文本',
            contains: '请输入文本（必须含有自愿两字）',
          },
        }

        //创建实例对象
        this.WxValidate = new this.wxValidate(rules, messages)

        // 自定义验证规则
        this.WxValidate.addMethod('assistance', (value, param) => {
          return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
        }, '请勾选1-2个敲码助手')
      },
      radioChange(e) {
        const value = e.mp.detail.value
        const radio = this.radio
        const items = radio.map(n => {
          return Object.assign({}, n, {
            checked: n.value === value,
          })
        })
        this.radio = items ;
        this.form.gender = value;
      },
      checkboxChange(e) {
        const values = e.mp.detail.value
        const checkbox = this.checkbox
        const items = checkbox.map(n => {
          return Object.assign({}, n, {
            checked: values.includes(n.value),
          })
        })
        console.log(items)

        this.checkbox = items ;
        this.form.assistance  = values;
      },
      bindCountryChange(e) {
        const value = e.mp.detail.value
        this.form.countryIndex = value;
      },
    },
    mounted(){
          this.initValidate()
    }
  }
</script>


<style lang="scss" scoped>
.relus{
  height: 100%;
  scroll-view{
    height:100%;
  }
}
</style>
